<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>动画</title>
		<style>
			.box{
				width: 300px;
				height: 500px;
				border: 4px solid green;
				/* step2:绑定动画 
				animation:动画名称 持续时间 次数；
				infinite：无限的
				linear：匀速
				*/
				animation: sf 12s infinite linear;
			}
			/* step1:创建关键帧 */
			/* from 开始帧 *//* to 结束帧 */
			@keyframes sf{
				0%,30%{     /* 百分比：时间节点 */
					width: 300px;
					height: 300px;
					background-color: antiquewhite;
					transform: rotate(0);
				}
				40%,70%{     
					width: 1200px;
					height: 500px;
					background-color: azure;
					transform: translate(200px,300px) rotate(180deg);
				}
				80%,100%{
					width: 400px;
					height: 400px;
					background-color: blue;
					transform: rotate(240deg);
					border-radius: 200px;
				}
				/* 100%{
					background-color: skyblue;
				} */
			}
		</style>
	</head>
	<body>
		<div class="box"></div>
	</body>
</html>
